import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './router/guard'
import '@/styles/index.scss'
import { createPinia } from 'pinia'
import { i18n } from './locales'
import VueClickAway from 'vue3-click-away'
import lazyPlugin from 'vue3-lazy'
import { registerSvgIcon } from '@/icons'
import { registerObSkeleton } from '@/components/LoadingSkeleton'
import 'prismjs/themes/prism.css'
import 'prismjs'
import 'element-plus/theme-chalk/index.css'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import v3ImgPreview from 'v3-img-preview'
import 'mavon-editor/dist/css/index.css'
import api from './api/api'
import '@fancyapps/ui/dist/fancybox/fancybox.css'
import { Fancybox } from '@fancyapps/ui'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import '@arco-design/web-vue/dist/arco.css'
import '@arco-themes/vue-chatanywhere/theme.css'
import registerComponent from '@/components/templates/index'
// 引入兔小巢
import TxcChangeLog from 'txc-change-log'
import { Site } from '@/config/config'

new TxcChangeLog({ id: Site.txcId }).activateChangeLog() // 更新日志插件

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

//Fancybox设置
Fancybox.bind('[data-fancybox]', {
  Carousel: {
    transition: 'classic',
    infinite: true
  },
  Images: {
    initialSize: 'fit',
    zoom: false,
    protected: true
  },
  Thumbs: {
    type: 'modern'
  },
  Toolbar: {
    display: {
      left: ['slideshow', 'infobar'],
      middle: ['toggle1to1', 'rotateCW', 'flipX', 'flipY', 'fullscreen'],
      right: ['thumbs', 'close']
    }
  },
  hideScrollbar: false
})
// @ts-ignore
Fancybox.bind('[data-fancybox="div"]', {
  defaultType: 'html',
  autoFocus: false,
  groupAttr: false,
  hideScrollbar: false,
  dragToClose: false
})
export const app = createApp(App)
  .use(router)
  .use(pinia)
  .use(i18n)
  .use(ElementPlus)
  .use(VueClickAway)
  .use(v3ImgPreview, {})
  .use(lazyPlugin, {
    loading: require('@/assets/default-cover.jpg'),
    error: require('@/assets/default-cover.jpg')
  })

registerComponent(app)


for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

//设置极验全局变量
app.provide('captchaId', '1a78627f08ec5d453a4d8ae4bab3d0a1')

registerSvgIcon(app)
registerObSkeleton(app)
app.mount('#app')
api.report()
